<template>
<div id="app">
<div id="select">
    <label>请选择回看文件：</label>
    <select @change="selectFile($event)">
        <option v-for="(file, index) in file_list" :key="index">
            {{ file }}
        </option>
    </select>
</div>
<div id="player" height: 800px; width: 100% >{{data}}</div>
</div>
</template>
<script>
import '@/styles/asciinema-player.css'
import axios from "axios"
export default {
    name:"Rec",
    data () {
        return {
            url:'',
            file_list:[],
        }
    },
    mounted () {
        axios
        .get('/recoder')
        .then(response => {
            console.log(response)
            this.file_list = response.data
        })
        .catch(function (error) { 
            console.log(error);
        });
    },
    methods: {
        selectFile:function(event){
            console.log(event.target.value)
            // location.hostname + ":8080" +
            this.url ="http://" + location.hostname + ":8080"+ "/rec/" + event.target.value
            console.log("%%%%%%%%%%%%%%%%"+this.url)
            document.getElementById("player").innerHTML= '<asciinema-player src="'+this.url+'"></asciinema-player>'
            // 不行
            // document.getElementById("player").innerHTML= '<asciinema-player src="http://127.0.0.1:8080/rec/192.168.153.138_22_root_2023-08-30_02-35-41_from-192.168.153.1.cast+"></asciinema-player>'
        }
    }
}
</script>

<style scoped>
#select {
    background-color: #fff;
}
</style>